<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    #upload {
      display: none;
    }

    .figure-caption {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-4">
      <div class="row mb-3">
        <label class="col-form-label col-3">昵称：</label>
        <div class="col-9">
          <input class="form-control col-9" type="text" name="nickname" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province" id="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city" id="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="area" id="county">
            <option value="">--区--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <input class="form-control col-9" type="hidden" name="avatar" />
          <figure class="figure">
            <input type="file" id="iptFile" style="display: none;" />
            <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
              class="figure-img img-fluid rounded thumb" alt="..." />
            <figcaption class="figure-caption" id="btnChoose">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script>

    axios.defaults.baseURL = 'http://ajax-api.itheima.net';

    function qs(ele) {
      return document.querySelector(ele)
    }
    
    // 头像本地存储
    let urls=localStorage.getItem('url')
    qs('img').src=urls
    //   qs('#province').addEventListener()
    // 渲染省

    async function fn1() {
      let { data: { data } } = await axios.get('/api/province')
      console.log(data);
      let n = data.map(item => `<option value="${item}">${item}</option>`).join('')
      qs('#province').innerHTML = '<option value="">请选择省份</option>' + n
    }
    //  市
    async function fn2(pname) {
      let { data: { data: data1 } } = await axios.get('/api/city', {
        params: {
          pname
        }
      })
      console.log(data1);
      let n1 = data1.map(item => `<option value="${item}">${item}</option>`).join('')
      qs('#city').innerHTML = '<option value="">请选择城市</option>' + n1
    }
    async function fn3(pname,cname) {
      let { data: { data: data2 } } = await axios.get('/api/area', {
        params: {
          pname,
          cname
        }
      })
      let n2 = data2.map(item => `<option value="${item}">${item}</option>`).join('')
      qs('#county').innerHTML = '<option value="">请选择区县</option>' + n2
    }

    async function fn() {
      await fn1()
      qs('#province').value = '安徽省'
      // 渲染市
      await fn2('安徽省')
      qs('#city').value = '合肥市'
      // 渲染区
      await fn3('安徽省','合肥市')
      qs('#county').value = '瑶海区'
    }
    fn()


    // 渲染市
    qs('#province').addEventListener('change', async function () {
       fn2(qs('#province').value)
      qs('#county').innerHTML = `<option value="">请选择区县</option>`
    })
    // // 渲染区
    qs('#city').addEventListener('change', async function () {
       fn3(qs('#province').value,qs('#city').value)
  })

    // 2. 设置 axios 请求根路径
    // 3. 配合 async await 完成功能

    // 头像
    qs('#btnChoose').addEventListener('click', function () {
      qs('#iptFile').click()
    })
    qs('#iptFile').addEventListener('change', async function () {
      let n = this.files[0]
      if (!n) return
      let fd = new FormData()
      fd.append('avatar', n)
      let { data: { data: res } } = await axios.post('/api/file', fd)
     localStorage.setItem('url',res.url)
      qs('.thumb').src = res.url
    })

  </script>
</body>

</html>